<template>
    <div class="all-model">
        <van-nav-bar
                title="标题"
                right-text="提现"
                left-arrow
                @click-left="onClickLeft"
                @click-right="onClickRight"
        />
        <van-popup v-model="show">
            <div style="width: 300px;min-height:100px;padding: 20px 10px 10px 10px">
                <van-field
                        v-model="value"
                        placeholder="请输入提现金额"
                        :error-message="errorMessage"
                />
                <van-button type="warning" style="margin-top: 30px" size="large" @click="cash">提现</van-button>
            </div>
        </van-popup>
        <div class="title">
            <img src="./bgc.png">
            <div class="title-mark"></div>
            <div class="title-content">
                <p>我的模豆</p>
                <p>{{ this.modelInfo.myModelBean }}</p>
                <div class="title-bottom">
                    <span>已提现金额：{{ this.modelInfo.withdrawalAlreadyMoney }}</span>
                    <span></span>
                    <span>提现中金额：{{ this.modelInfo.withdrawalIngMoney }}</span>
                </div>
            </div>
        </div>
        <div class="income">
            提现明细
        </div>
        <van-list
                v-model="loading"
                :finished="finished"
                finished-text="没有更多了"
                @load="onLoad"
                :offset="50"
        >
            <van-cell
                    v-for="(item, i) in modelInfo.detail"
                    :title="'-'+ item.withdrawalMoney +'模豆'"
                    :value="item.createTime"
                    :label="item.remarks"
                    title-style="font-size:18px;color:#E86489;"
            />

        </van-list>
    </div>
</template>

<script>
    import {cash, cashinfo} from '@/api/api';
    import {Toast} from 'vant';

    export default {
        name: "beandetail",
        data() {
            return {
                list: [],
                finished: false,
                error: false,
                loading: false,
                show: false,
                value: '',
                errorMessage: '',
                modelInfo: {}
            };
        },
        watch: {
            value(o) {
                // console.log(o, this.modelNum)
                if (o < 23) {
                    this.errorMessage = "提现金额不得小于23"
                } else if (o > this.modelInfo.myModelBean) {
                    this.errorMessage = "提现金额不得大于总金额"
                } else {
                    this.errorMessage = ""
                }
            }
        },
        created() {
            cashinfo({}).then(res => {
                console.log(res)
                this.modelInfo = res.data.data
                console.log(this.modelInfo, 'modelInfo')
            })
        },
        methods: {
            onLoad() {
                // fetchSomeThing().catch(() => {
                //     this.error = true;
                //
                // })
                this.loading = false;
            },
            onClickLeft() {
                this.$router.go(-1)
            },
            onClickRight() {
                this.show = true;
            },
            cash() {
                cash({
                    money: this.value,
                }).then(res => {
                    Toast(res.data.errmsg)
                    this.show = false
                    this.$router.go(0)
                }).catch(error => {
                    Toast(error.data.errmsg)
                    if(error.data.errno == 6003){
                        this.$router.push({name:'user-banklist'})
                    }
                });
            }
        }
    }
</script>

<style scoped>


    .title {
        height: 200px;
        position: relative;
        overflow: hidden;
    }

    .title > img {
        width: 100%;
        height: 100%;
    }

    .title-mark {
        width: 100%;
        height: 200px;
        background-color: rgba(226, 65, 106, 0.5);
        position: absolute;
        top: 0;
        z-index: 2;
    }

    .title-content {
        width: 100%;
        position: absolute;
        z-index: 3;
        top: 40%;
        margin-top: -10px;
        color: #ffffff;
        text-align: center;
    }

    .title-content > p:nth-of-type(2) {
        font-size: 26px;
    }

    .title-bottom {
        width: 100%;
        height: 50px;
        margin-top: 20px;
        display: flex;
        justify-content: space-around
    }

    .title-bottom > span {
        width: 40%;
        height: 100%;
        text-align: center;
    }

    .title-bottom > span:nth-of-type(2) {
        width: 1px;
        height: 50%;
        background-color: #fff;
    }

    .income {
        width: 100%;
        height: 50px;
        background-color: #fff;
        margin-top: 10px;
        display: flex;
        justify-content: flex-start;
        align-items: center;
        padding-left: 20px;
        font-size: 16px;
        font-weight: bold;
        margin-bottom: 1px;
    }
</style>
